jQuery-র স্লাইডিং ইফেক্টগুলি ওয়েব পেজে এলিমেন্টগুলির দৃশ্যমানতা নিয়ন্ত্রণ করে, একটি মসৃণ স্লাইডিং মোশনের মাধ্যমে। এগুলি বিশেষ করে ড্রপডাউন মেনু, কোলাপসিবল প্যানেল বা যে কোনো ধরনের হিডেন কনটেন্ট দেখানোর জন্য উপযোগী।
slideUp() ইফেক্ট
slideUp() ফাংশন এলিমেন্টকে উপরের দিকে স্লাইড করে ধীরে ধীরে লুকিয়ে ফেলে। এটি একটি এলিমেন্ট কে আস্তে আস্তে সংকুচিত করে যাতে তা আর দৃশ্যমান থাকে না।
উদাহরণ:
<button id="slideButton">Slide Up</button>
<div id="slideDiv" style="background-color: yellow; padding: 20px;">
এখানে ক্লিক করুন এবং লুকিয়ে ফেলুন!
</div>
<script>
$("#slideButton").click(function() {
$("#slideDiv").slideUp();
});
</script>
slideDown() ইফেক্ট
slideDown() ফাংশন এলিমেন্টকে নিচের দিকে স্লাইড করে ধীরে ধীরে দৃশ্যমান করে তোলে। এটি লুকানো এলিমেন্টকে প্রসারিত করে যাতে তা দৃশ্যমান হয়।
উদাহরণ:
<button id="slideDownButton">Slide Down</button>
<div id="hiddenDiv" style="display: none; background-color: green; padding: 20px;">
এখানে ক্লিক করুন এবং দেখান!
</div>
<script>
$("#slideDownButton").click(function() {
$("#hiddenDiv").slideDown();
});
</script>
slideToggle() ইফেক্ট
slideToggle() ফাংশন এলিমেন্টের বর্তমান স্থিতির উপর নির্ভর করে slideUp() অথবা slideDown() ফাংশন পালা করে চালায়। এটি একটি এলিমেন্টকে লুকানো বা দেখানোর জন্য আদর্শ, যখন ব্যবহারকারী একই বাটন বা ট্রিগার ব্যবহার করে।
উদাহরণ:
<button id="toggleButton">Toggle Slide</button>
<div id="toggleDiv" style="background-color: blue; padding: 20px;">
এখানে ক্লিক করুন এবং টগল করুন!
</div>
<script>
$("#toggleButton").click(function() {
$("#toggleDiv").slideToggle();
});
</script>
jQuery-র স্লাইডিং ইফেক্টগুলি ওয়েব পেজের ইন্টারঅ্যাকটিভিটি বাড়াতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে দারুণ উপায়। এই ইফেক্টগুলি বিভিন্ন ধরনের কনটেন্ট প্রদর্শনের পদ্ধতি সহজ এবং আকর্ষণীয় করে তোলে, যা ওয়েবসাইটের দৃশ্যমানতা এবং কার্যকারিতা উন্নত করে।
Read more
